function upperButtonClick(event) {
    let link = event.currentTarget.dataset.link;
    alert(link);

    let splitButton = event.currentTarget.parentElement;
    let dropdown = splitButton.parentElement.getElementsByClassName("dropdown")[0];

    dropdown.style.display = "none";
    splitButton.addEventListener("mouseleave", splitButtonLeave);
    splitButton.style.background = "none";
    splitButton.style.outline = "none";
    splitButton.getElementsByClassName("splitter")[0].style.visibility = "hidden";
}

function lowerButtonClick(event) {
    let splitButton = event.currentTarget.parentElement;
    let splitter = splitButton.getElementsByClassName("splitter")[0];
    let dropdown = splitButton.parentElement.getElementsByClassName("dropdown")[0];

    if (dropdown.style.display == "none") {
        dropdown.style.display = "block";
        splitButton.removeEventListener("mouseleave", splitButtonLeave);
        splitButton.style.background = "#cbcbcb";
        splitButton.style.outline = "solid 1px #888888";
        splitter.style.visibility = "visible";
    } else {
        dropdown.style.display = "none";
        splitButton.addEventListener("mouseleave", splitButtonLeave);
    }
}

function splitButtonEnter(event) {
    let splitButton = event.target;
    let splitter = splitButton.getElementsByClassName("splitter")[0];

    splitButton.style.background = "#cbcbcb";
    splitButton.style.outline = "solid 1px #888888";
    splitter.style.visibility = "visible";
}

function splitButtonLeave(event) {
    let splitButton = event.target;
    let splitter = splitButton.getElementsByClassName("splitter")[0];

    splitButton.style.background = "none";
    splitButton.style.outline = "none";
    splitter.style.visibility = "hidden";
}

function optionClick(event) {
    let link = event.currentTarget.dataset.link;
    alert(link);

    let dropdown = event.currentTarget.parentElement;
    dropdown.style.display = "none";

    let splitButton = dropdown.parentElement.children[0];

    splitButton.addEventListener("mouseleave", splitButtonLeave);
    splitButton.style.background = "none";
    splitButton.style.outline = "none";
    splitButton.getElementsByClassName("splitter")[0].style.visibility = "hidden";
}

function optionEnter(event) {
    event.currentTarget.style.background = "#cbcbcb";
}

function optionLeave(event) {
    event.currentTarget.style.background = "none";
}

function outsideClick(event) {
    let dropdownSplitButtons = document.getElementsByClassName("dropdown-split-button");

    for (i = 0; i <= dropdownSplitButtons.length - 1; i++) {
        if (dropdownSplitButtons[i].contains(event.target) == false) {
            dropdownSplitButtons[i].getElementsByClassName("dropdown")[0].style.display = "none";

            let splitButton = dropdownSplitButtons[i].children[0];

            splitButton.addEventListener("mouseleave", splitButtonLeave);
            splitButton.style.background = "none";
            splitButton.style.outline = "none";
            splitButton.getElementsByClassName("splitter")[0].style.visibility = "hidden";
        }
    }
}

window.onload = function() {
    let splitButtons = document.getElementsByClassName("split-button");

    for (i = 0; i <= splitButtons.length - 1; i++) {
        splitButtons[i].getElementsByClassName("upper-button")[0].addEventListener("click", upperButtonClick);
        splitButtons[i].getElementsByClassName("lower-button")[0].addEventListener("click", lowerButtonClick);
        splitButtons[i].addEventListener("mouseenter", splitButtonEnter);
        splitButtons[i].addEventListener("mouseleave", splitButtonLeave);
    }
    
    let options = document.getElementsByClassName("dropdown-option");
    
    for (i = 0; i <= options.length - 1; i++) {
        options[i].addEventListener("click", optionClick);
        options[i].addEventListener("mouseenter", optionEnter);
        options[i].addEventListener("mouseleave", optionLeave);
    }

    document.addEventListener("click", outsideClick);
}